<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件</title>
</head>
<body>
<!--
注意：HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates.
      You should probably use "change-text" instead of "changeText"
 -->
<div id="test" :style="{ fontSize: postFontSize + 'em' }">
  <blog-post v-for="post in posts" :post="post" @change-text="changeText">
    <div><i>这里的内容会展示在slot插槽内--title:{{post.title}}--postFontSize:{{postFontSize}}</i></div>
    <div slot="second">第二个插槽</div>
  </blog-post>
</div>

<script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    /*
      组件名称如果用PascalCase方式，则引用这个自定义元素时kebab-case和PascalCase两种命名法都可以使用
      以下使用的是全局注册组件的方式
      父组件可以使用 props 把数据传给子组件
        注意：
          （1）不要在子组件里直接修改 props，因为父组件数据改变时会重新覆盖掉，props是只读的，vue检测到你修改了props会发出警告
          要改的话，需要通过父组件的data来改变，或者在data里定义新的变量来接收props的值（props比data先初始化，所以data可以读取props值）
          （2）props属性名不能用保留字，如：ref、key、class等
      子组件可以使用 $emit 方法触发事件，触发后，父组件可以通过 v-on 监听这个事件
     */
    Vue.component('blogPost', {
        // props: ['post'], // 方式一：只接收
        // props: {     // 方式二：限制类型
        //   post: Object
        // },
        props: {    // 方式三：限制类型和默认值、必要性
          post: {
            type: Object,
            default: {
              title: 'Hello',
              content: 'World',
              size: 1
            },
            required: true
          }
        },
        methods: {
          changeText () {
            // 通过$emit触发change-text事件，父组件能通过绑定这个事件监听到这个事件
            this.$emit('change-text',this.post.size)
          }
        },
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
      <button v-on:click="changeText()">change-font-size:{{post.size}}</button>
      <slot></slot>
      插槽2：<slot name="second"></slot>
    </div>
  `
    })

  const vm = new Vue({
      el: '#test',
      data: {
          posts : [{title:'标题1',content:'aaaaaaaaa',size: 0.1},{title:'标题2',content:'bbbbbbbbb',size: -0.1}],
          postFontSize: 1
      },
      methods: {
          changeText ($event) {
              this.postFontSize += $event;
          }
      }
  })

</script>
</body>
</html>